<template>
    <div class="icons">
        <swiper  :options="swiperOption">
            <swiper-slide v-for="(page, index ) of pages" :key="index">
        <div class="icon" v-for="item of page" :key="item.id">
            <img class="icon-img" :src="item.imgUrl" alt="">
            <p class="icon-content">{{item.desc}}</p>
        </div>
            </swiper-slide>
        </swiper>

    </div>
</template>

<script>

export default {
  name: 'HomeIcons',
  data () {
    return {
      swiperOption: {
        autoplay: false
      }

    }
  },
    props:{
        list:Array
    },
  computed: {
    pages () {
      const pages = []
      this.list.forEach((item, index) => {
      const page = Math.floor(index / 8)
       if(!pages[page]) {
      pages[page] = []
    }
              pages[page].push(item)
          })
        return pages
      }
    }

}
</script>

<style lang="stylus" scoped>
    .icons >>> .swiper-container
        height:0
        padding-bottom:55%
        .icon
            margin-top:.2rem
            display: inline-block;
            width:19%
            margin-left:4%;
            text-align: center;
            .icon-img
             width:100%
             margin:0 auto
             display:block
        .icon:nth-child(4n)
             margin-right:4%
            .icon-content
                display: block
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;

</style>
